<template>
  <div>
    <div class="address">
      <div class="address_input flex">
        <span>收件人</span>
        <input
          class="flex-1 input"
          type="text"
          placeholder="请填写"
          placeholder-style="font-size:14px;font-weight:400;color:rgba(184,186,185,1);"
          v-model.lazy="newAddress.fullName"
        />
      </div>

      <div class="address_input flex">
        <span>联系电话</span>
        <input
          class="flex-1 input"
          maxlength="11"
          type="number"
          placeholder="请填写"
          placeholder-style="font-size:14px;font-weight:400;color:rgba(184,186,185,1);"
          v-model.lazy="newAddress.phone"
        />
      </div>

      <div class="address_input flex align-center">
        <span>收件地区</span>
        <picker mode="region" @change="handleSuccess" class="flex-1 input">
          <view>
            <span class="picker" v-if="show">请选择</span>
            {{newAddress.pca}}
          </view>
        </picker>

        <i class="iconfont iconyoujiantou add_icon"></i>
      </div>

      <div class="address_input flex">
        <span>详细地址</span>
        <input
          class="flex-1 input"
          type="text"
          placeholder="请填写"
          placeholder-style="font-size:14px;font-weight:400;color:rgba(184,186,185,1)"
          v-model.lazy="newAddress.address"
        />
      </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
      <button class="btn" @click="handleDetails">保存</button>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { addAddress, defineAddress, getAddress } from "@/api/api";
export default {
  props: {},
  data() {
    return {
      show: true,
      newAddress: {
        area: "",
        areaId: 0,
        city: "",
        cityId: 0,
        def: false,
        fullName: "",
        id: 0,
        memberId: 0, // 用户id
        phone: "",
        province: "",
        provinceId: 0,
        pca: "",
        address: ""
      },
      areaList: {
        // province_list: {
        //   110000: '北京市',
        //   120000: '天津市'
        // },
        // city_list: {
        //   110100: '北京市',
        //   110200: '县',
        //   120100: '天津市',
        //   120200: '县'
        // },
        // county_list: {
        //   110101: '东城区',
        //   110102: '西城区',
        //   110105: '朝阳区',
        //   110106: '丰台区',
        //   120101: '和平区',
        //   120102: '河东区',
        //   120103: '河西区',
        //   120104: '南开区',
        //   120105: '河北区'
        //   // ....
        // }
      },
      defaultAddress: "", // 默认选中的省id
      selectAddress: [], // 地址
      addressCode: [], // 地址code
      editList: {}
    };
  },
  computed: {},
  created() {},
  mounted() {
    Object.assign(this.$data, this.$options.data());
    this.index = this.$root.$mp.query.index;
    // 如果 this.index 有值，则表示是从编辑页过来的 将此时从后台返回的值填入相应的 input 里面
    if (this.index) {
      wx.setNavigationBarTitle({
        title: "编辑收货地址"
      });

      this.getAddress();
    }
  },
  watch: {},
  methods: {
    /**
     * 地区选择
     */
    handleSuccess(e) {
      // console.log("e:", e);
      this.selectAddress = e.target.value;
      this.addressCode = e.target.code;
      this.newAddress.province = this.selectAddress[0];
      this.newAddress.provinceId = this.addressCode[0];
      this.newAddress.city = this.selectAddress[1];
      this.newAddress.cityId = this.addressCode[1];
      let area = this.selectAddress[2] || "";
      let areaId = this.addressCode[2] || 0;
      this.newAddress.area = area;
      this.newAddress.areaId = areaId;
      let arr = [];
      if (this.newAddress.province) {
        arr.push(this.newAddress.province);
      }
      if (this.newAddress.city) {
        arr.push(this.newAddress.city);
      }
      if (this.newAddress.area) {
        arr.push(this.newAddress.area);
      }
      this.newAddress.pca = arr.join(" ");
      // console.log("this.newAddress.pca", this.newAddress.pca);
      this.show = false;
    },
    // // 弹出选择地址弹框
    // showAddress() {
    //   this.show = true;
    // },
    /**
     * 格式化地址成vant 组件需要的数据格式
     */
    formateAddress() {
      let province_list = {};
      let city_list = {};
      let county_list = {};
      // 处理只传省份的的数据
      // for (let shipping of shippingAddress) {
      //   if (!shipping.city.id) {
      //     for (let address of addressList.addressList) {
      //       if (shipping.province.id == address.id) {
      //         shipping.city.id = address.id;
      //         shipping.city.name = address.name;
      //         break;
      //       }
      //     }
      //   }
      // }

      // 首先遍历后台给的数据
      // for (let shipping of shippingAddress) {
      // 再遍历文件里面的地方数据
      for (let address of addressList.addressList) {
        // 当后台拿到的省 id 和文件里面的地方数据的 id 相等时，就将此时从后台拿到的数据添加的 province_list
        if (address.pid == 0) {
          province_list[address.id] = address.name;
        } else if (address.name) {
          // 当后台拿到的市 id 和文件里面的地方数据的 id 相等时，就将此时从后台拿到的数据添加的 city_list
          //if (shipping.city.id == address.id) {
          city_list[address.id] = address.name;
          //  }
        } else {
          // 当后台拿到的市 id 和文件里面的地方数据的 pid 相等时，就将此时从后台拿到的数据添加的 county_list , 并且是将这个文件 "区" 的数据全部添加到 county_list 里面
          // if (shipping.city.id == address.pid) {
          county_list[address.id] = address.full_name;
        }
        // }
      }
      // }

      this.areaList = {
        province_list,
        city_list,
        county_list
      };
    },
    /**
     * 保存跳转 收货地址页面  校验
     */
    handleDetails() {
      if (!this.newAddress.fullName) {
        wx.showToast({
          title: "请填写收货人姓名",
          icon: "none",
          duration: 2000
        });
        return;
      }
      if (!this.newAddress.phone) {
        wx.showToast({
          title: "请填写收货人电话",
          icon: "none",
          duration: 2000
        });
        return;
      }
      if (!this.newAddress.pca) {
        wx.showToast({
          title: "请选择地址",
          icon: "none",
          duration: 2000
        });
        return;
      }
      if (!this.newAddress.address) {
        wx.showToast({
          title: "请填写详细地址",
          icon: "none",
          duration: 2000
        });
        return;
      }
      if (!this.isPoneAvailable(this.newAddress.phone)) {
        wx.showToast({
          title: "手机格式不正确",
          icon: "none",
          duration: 2000
        });
        return;
      }
      // 修改地址的;
      if (this.index) {
        this.defineAddress();
        return;
      }
      this.addAddress();
    },
    // 添加收货地址
    async addAddress() {
      let data = await addAddress(this.newAddress);
      // console.log("data:", data);
      // 清空
      this.emptyObject();
      wx.navigateBack({
        delta: 1
      });
    },
    // 修改收货地址
    async defineAddress() {
      let data = await defineAddress(this.newAddress);
      // console.log("data:", data);
      this.emptyObject();
      wx.navigateBack({
        delta: 1
      });
    },
    emptyObject() {
      this.newAddress = {
        area: "",
        areaId: 0,
        city: "",
        cityId: 0,
        def: false,
        fullName: "",
        id: 0,
        phone: "",
        province: "",
        provinceId: 0,
        pca: "",
        address: ""
      };
    },
    /**
     * 获取配送地址
     */
    async getAddress() {
      wx.showLoading({
        title: "加载中",
        icon: "none",
        mask: true
      });
      const data = await getAddress();
      wx.hideLoading();
      data.forEach(item => {
        if (item.id === Number(this.index)) {
          this.newAddress = item;
          let arr = [];
          if (this.newAddress.province) {
            arr.push(this.newAddress.province);
          }
          if (this.newAddress.city) {
            arr.push(this.newAddress.city);
          }
          if (this.newAddress.area) {
            arr.push(this.newAddress.area);
          }
          this.newAddress.pca = arr.join(" ");
          this.show = false;
        }
      });
      // this.newAddress = data;
    },
    // 校验手机号码
    isPoneAvailable(poneInput) {
      var myreg = /^1[0-9]{10}$/;
      if (!myreg.test(poneInput)) {
        return false;
      } else {
        return true;
      }
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
.address {
  padding: 10px 0;
  margin: 0 15px;
  box-sizing: border-box;
  border-bottom: 1px solid #e6e6e6;

  span {
    font-size: 14px;
    font-weight: 400;
    color: rgba(2, 6, 4, 1);
  }

  .address_input {
    padding: 10px 0;
    box-sizing: border-box;
  }

  .input {
    text-align: right;
    font-size: 14px;
    font-weight: 400;
    color: #6b6b6b;

    .picker {
      font-size: 14px;
      font-weight: 400;
      color: rgba(184, 186, 185, 1);
      text-align: end;
    }
  }

  .add_icon {
    font-size: 12px;
    color: #b8bab9;
    margin-left: 8px;
  }
}

// 底部
.footer {
  height: 54px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 6px 15px;
  box-sizing: border-box;
  // background-color: skyblue;

  .btn {
    background-color: #187798;
    color: rgba(255, 255, 255, 1);
    font-weight: 700;
    font-size: 15px;
    height: 100%;
    border-radius: 2px;
  }
}

// 地区弹框
.popup {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1000;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  .box {
    width: 100%;
    position: absolute;
    bottom: 0;
  }
}
</style>
